<template>
	<view>
		<view class="nav-content" :style="{backgroundColor:bgColor}" :class="{fixed:fixed}">
			<view class="left">
				<view class="icon-box" v-if="leftIcon" @click="back">
					<slot name="left">
						<image src="/static/icon/left.svg" class="icon"></image>
					</slot>
				</view>
			</view>
			<view class="title">
				<slot name="title">
					{{title}}
				</slot>
			</view>
			<view class="right" @click="clickRight">
				<slot name="right">
					<template v-if="rightContent">
						<view class="right-content">{{rightContent}}</view>
					</template>
				</slot>
				<view class="icon-box" v-if="rightIcon">
					<image :src="`/static/icon/${rightIcon}.svg`" class="icon"></image>
				</view>
				<view class="icon-box" v-if="rightBut">
					<u-button>{{}}</u-button>
				</view>
			</view>
		</view>
		<!-- 占空间用 -->
		<view :style="{height: navHeight+'px'}"></view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue"
	const emit = defineEmits(['clickRight']);
	const navHeight = ref(80)
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		bgColor: {
			type: String,
			default: '#fff'
		},
		fixed: {
			type: Boolean,
			default: true
		},
		leftIcon: {
			type: Boolean,
			default: false
		},
		rightContent: {
			type: String,
			default: ''
		},
		rightIcon: {
			type: String,
			default: ''
		},
		rightBut: {
			type: Boolean,
			default: false
		}
	})
	// 加载后获取 .nav-content 的高度
	onMounted(() => {
		try {
			uni.createSelectorQuery().select('.nav-content').boundingClientRect((res) => {
				if (res && typeof res === 'object' && res.height) {
					// 存储高度
					navHeight.value = res.height;
				}
			}).exec();
		} catch (error) {
			// 静默处理，不输出错误
		}
	});

	const back = () => {
		uni.navigateBack()
	}
	const clickRight = () => {
		emit('clickRight'); // 触发事件
	}
</script>

<style scoped lang="scss">
	.nav-content {
		display: flex;
		padding: 38.33rpx 41.81rpx 24.39rpx;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		height: 70rpx;
		border-radius: 0 0 34.88rpx 34.88rpx;

		&.noRadius {
			border-radius: 0;
		}

		&.fixed {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 99;
		}

		.left {
			min-width: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.icon-box {
				width: 69.77rpx;
				height: 69.77rpx;
				border-radius: 17.44rpx;
				border: 1.74rpx solid #EFF6FF;
				display: flex;
				align-items: center;
				justify-content: center;

				.icon {
					width: 10.47rpx;
					height: 20.93rpx;
				}
			}
		}

		.right {
			// min-width: 80rpx;
			min-width: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.right-content {
				font-size: 28rpx;
				color: #000;
			}

			.icon-box {
				display: flex;
				align-items: center;
				justify-content: center;

				.icon {
					width: 41.88rpx;
					height: 40.29rpx;
				}
			}
		}

		.title {
			font-size: 34.37rpx;
			font-weight: 500;
			display: flex;
			align-items: center;
		}
	}
</style>